<template>
  <el-col :span="12" class="container-right">
    <div class="title">青岛市政务服务分布图</div>
    <el-row>
      <el-col :span="7">
        <div class="panel-left-1">
          <div class="serviceTimesBox">
            <div class="tit">自助终端累计服务次数</div>
            <ul style="margin-bottom: 0;">
              <li v-for="(item, index) in automaticServiceTimesArr" :key="index" :style="(index+1) % 3 === 0 ? 'margin-right: 10px': 'margin-right: 5px;'">{{ item }}</li>
            </ul>
          </div>
        </div>
        <div class="panel-left-2">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../assets/icon/icon-esTrend.png" width="28px" />基层便民服务场所</div>
            <div id="myChart_7" :style="{width: '100%', height: '350px'}"></div>
          </div>
        </div>
        <div class="panel-left-3">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div id="myChart_8" :style="{width: '100%', height: '390px'}"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="panel-middle-1">
          <div class="subTit">
            <!-- <img src="../assets/icon/icon-industryShare.png" width="28px" /> -->
            <i class="el-icon-location-information" style="font-size: 30px;"></i>
            政务服务导航图
          </div>
          <div id="myChart_11" :style="{width: '100%', height: '980px'}"></div>
          <div class="tuli">
            <div><span style="background: #4649f1;"></span>市区级的便民服务中心</div>
            <div><span></span>镇街级的便民服务中心</div>
            <div><i class="el-icon-location"></i>政务服务自助终端网点</div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="panel-right-1">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit"><img src="../assets/icon/icon-industryShare.png" width="28px" />政务服务综合自助终端</div>
            <div id="myChart_9" :style="{width: '100%', height: '270px'}"></div>
          </div>
        </div>
        <div class="panel-right-2">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px;">
            <div class="subTit">
              <img src="../assets/icon/icon-enterpriseTotalNum.png" width="28px" />
              政银合作自助服务站点 <span style="float: right;color: #fff;font-weight: 700;font-size: 23px;">共<span style="font-size: 33px;color: #FAD972;font-family: AgencyFB;font-weight: 700;">440</span>个</span>
            </div>
            <div id="myChart_10" :style="{width: '100%', height: '620px'}"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>
import QDMapJson from '../assets/echartMap-QD.json'

export default {
  name: 'index1-child',
  data () {
    return {
      // winServiceTimesArr: [], //窗口累计服务次数
      automaticServiceTimesArr: [1,4,3,8,7,2], // 自助终端累计服务次数
      QDMapData: [
        {
          // "name": "山东省青岛市市南区宁夏路286号行政审批服务大厅",
          "name": '市南区宁夏路286号',
          "value": [ 120.418795, 36.081644, 0]
        }, {
          // "name": "山东省青岛市崂山区云岭支路与阳岭路交叉路口往东约100米(山东省青岛市人民检察院南侧)",
          "name": '崂山区云岭支路与阳岭路交叉路口往东约100米',
          "value": [120.479163, 36.114469, 0 ]
        }, {
          // "name": "山东省青岛市市北区鞍山二路48号",
          "name": "市北区鞍山二路48号",
          "value": [ 120.372969, 36.109812, 0 ]
        }, 
        {
          // "name": "山东省青岛市黄岛区双珠路166号2号楼",
          "name": "黄岛区双珠路166号2号楼",
          "value": [ 120.053157, 35.880788, 0]
        }, {
          // "name": "山东省青岛市平度市北京路379-2号",
          "name": "平度市北京路379-2号",
          "value": [ 119.97813, 36.756942, 0 ]
        }, {
          // "name": "山东省青岛市即墨区行政审批服务局",
          "name": "即墨区行政审批服务局",
          "value": [ 120.542799, 36.414231, 0 ]
        }, {
          // "name": "山东省青岛市莱西市长岛路148西南60米",
          "name": "莱西市长岛路148西南60米",
          "value": [ 120.522156, 36.889321, 0 ]
        }, {
          // "name": "山东省青岛市城阳市民中心位于文阳路675号",
          "name": "城阳市民中心位于文阳路675号",
          "value": [ 120.388022, 36.301775, 0 ]
        }, {
          // "name": "山东省青岛市李沧区黑龙江中路617号",
          "name": "李沧区黑龙江中路617号",
          "value": [ 120.43222, 36.14817, 0 ]
        }, {
          // "name": "山东省青岛市胶州市北京路2号",
          "name": "胶州市北京路2号",
          "value": [ 120.030433, 36.264718, 0 ]
        }
      ]
    }
  },
  mounted() {
    this.renderChart_spdt()
    this.renderChart_bmfw()
    this.renderChart_selfServiceMachine()
    this.renderChart_bankSelfService()
    this.renderChart_QDMap()
  },
  methods: {
    // 审批大厅窗口数量&入驻事项
    renderChart_spdt() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_8'))
      let option = {
        legend: {
          data: ['网点', '实体点'],
          right: '0%',
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            fontSize: 23,
            color: '#ffffff'
          }
        },
        grid: {
          top: '25%',
          left: '0%',
          right: '6%',
          bottom: '-5%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '胶州市', '平度市', '莱西市'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: -40, // x轴文字倾斜 -25
            textStyle: {
              fontSize: 18,
              color: '#ffffff',
              fontWeight: 700
            },
            margin: 20,
            formatter:function(params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 3;  //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                          tempStr = params.substring(start, paramsNameNumber);
                      } else {
                          tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                  }

              } else {
                  newParamsName = params;
              }
              return newParamsName
            },
          },
        }],
        yAxis: [{
          type: 'value',
          name: '个',
          nameTextStyle:{
            color: '#fff', 
            fontSize: 23
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 22,
              color: '#ffffff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        }],
        series: [
          {
            name: '网点',
            type: 'bar',
            data: [38, 52, 71, 38, 232, 186, 177, 95, 207, 106],
            barWidth: '11px',
            label: {
              show: true,
              position: 'top',
              offset: [-7, 0],
              textStyle: {
                color: '#fff',
                fontSize: 18
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FFBE1E' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#EB4C27' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          },
          {
            name: '实体点',
            type: 'bar',
            data: [462, 255, 491, 400, 517, 1056, 785, 805, 823, 655],
            barWidth: '11px',
            label: {
              show: true,
              position: 'top',
              offset: [0, 0],
              textStyle: {
                color: '#fff',
                fontSize: 18
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#B034FF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#4245FA' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 基层便民服务场所
    renderChart_bmfw() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_7'))
      let bottom = 30

      let option = {
        legend: {
          left: 'center',
          bottom: 0,
          itemWidth: 15,
          itemHeight: 11,
          itemGap: 20,
          borderRadius: 4,
          textStyle: {
            color: '#fff',
            fontSize: 20
          },
        },
        grid: [{
          top: '4%',
          left: '4%',
          width: '35%',
          containLabel: true,
          bottom
        }, {
          top: '2%',
          left: '52%',
          width: '0%',
          bottom: '10%'
        }, {
          top: '4%',
          right: '4%',
          width: '35%',
          containLabel: true,
          bottom
        }],
        xAxis: [{
          type: 'value',
          inverse: true,
          axisLabel: {
            show: true,
            fontSize: 16,
            color: '#fff',
            fontWeight: 700,
            interval: 0,  
            rotate: 35
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        }, {
          gridIndex: 1,
          show: true
        }, {
          gridIndex: 2,
          type: 'value',
          axisLabel: {
            show: true,
            fontSize: 16,
            color: '#fff',
            fontWeight: 700,
            interval: 0,  
            rotate: -35
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        }],
        yAxis: [{
            position: 'right',
            axisLabel: {
              show: false
            },
            type: 'category',
            inverse: false,
            axisLine: {
              lineStyle: {
                color: 'rgba(218, 219, 219, 0.1)'
              }
            },
            axisTick: {
              show: false
            }
          }, {
            gridIndex: 1,
            position: 'center',
            axisLabel: {
              align: 'center',
              padding: [8, 0, 0, 0],
              fontSize: 20,
              color: '#fff',
              fontWeight: 700
            },
            type: 'category',
            inverse: false,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: ['莱西市', '平度市', '胶州市', '即墨区', '西海岸新区', '城阳区', '崂山区', '李沧区', '市北区', '市南区'],
          }, {
            gridIndex: 2,
            position: 'left',
            axisLabel: {
              show: false
            },
            type: 'category',
            inverse: false,
            axisLine: {
              lineStyle: {
                color: 'rgba(218, 219, 219, 0.1)'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [{
            name: '镇街级',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#EB4C27' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFBE1E' // 100% 处的颜色
                }], false),
                barBorderRadius: [4, 0, 0, 4]
              }
            },
            type: 'bar',
            barWidth: 15,
            label: {
              position: 'left',
              show: true,
              fontFamily: 'Rubik-Medium',
              fontSize: 18,
              distance: 4,
              color: '#fff'
            },
            // data: [11, 22, 11, 5, 23, 8, 17, 12, 17, 12],
            data: [12, 17, 12, 17, 8, 23, 5, 11, 22, 11],
          }, {
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: '村（社区）级',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#8FFCA0' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0BCBFB' // 100% 处的颜色
                }], false),
                barBorderRadius: [0, 4, 4, 0]
              }
            },
            type: 'bar',
            barWidth: 15,
            label: {
              position: 'right',
              show: true,
              fontFamily: 'Rubik-Medium',
              fontSize: 18,
              distance: 4,
              color: '#fff'
            },
            // data: [50, 137, 119, 25, 453, 255, 1219, 74, 79, 92],
            data: [92, 79, 74, 1219, 255, 453, 25, 119, 137, 50],
          }
        ]
      }
      // let option = {
      //   legend: {
      //     data: ['镇街级', '村（社区）级'],
      //     right: '0%',
      //     itemWidth: 15,
      //     itemHeight: 15,
      //     textStyle: {
      //       fontSize: 23,
      //       color: '#ffffff'
      //     }
      //   },
      //   grid: {
      //     top: '25%',
      //     left: '0%',
      //     right: '6%',
      //     bottom: '-5%',
      //     containLabel: true
      //   },
      //   xAxis: [{
      //     type: 'category',
      //     data: ['市南区', '市北区', '李沧区', '崂山区', '西海岸新区', '城阳区', '即墨区', '胶州市', '平度市', '莱西市'],
      //     axisTick: {
      //       show: false
      //     },
      //     axisLine: {
      //       show: false
      //     },
      //     axisLabel: {
      //       interval: 0,
      //       rotate: -40, // x轴文字倾斜 -25
      //       textStyle: {
      //         fontSize: 18,
      //         color: '#ffffff',
      //         fontWeight: 700
      //       },
      //       margin: 20,
      //       formatter:function(params) {
      //         var newParamsName = "";
      //         var paramsNameNumber = params.length;
      //         var provideNumber = 3;  //一行显示几个字
      //         var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
      //         if (paramsNameNumber > provideNumber) {
      //           for (var p = 0; p < rowNumber; p++) {
      //             var tempStr = "";
      //             var start = p * provideNumber;
      //             var end = start + provideNumber;
      //             if (p == rowNumber - 1) {
      //               tempStr = params.substring(start, paramsNameNumber);
      //             } else {
      //               tempStr = params.substring(start, end) + "\n";
      //             }
      //             newParamsName += tempStr;
      //           }
      //         } else {
      //           newParamsName = params;
      //         }
      //         return newParamsName
      //       },
      //     },
      //   }],
      //   yAxis: [{
      //     type: 'value',
      //     name: '个',
      //     nameTextStyle:{
      //       color: '#fff', 
      //       fontSize: 23
      //     },
      //     axisTick: {
      //       show: false
      //     },
      //     axisLine: {
      //       show: false
      //     },
      //     axisLabel: {
      //       textStyle: {
      //         fontSize: 22,
      //         color: '#ffffff'
      //       }
      //     },
      //     splitLine: {
      //       lineStyle: {
      //         color: 'rgba(218, 219, 219, 0.1)'
      //       }
      //     }
      //   }],
      //   series: [
      //     {
      //       name: '镇街级',
      //       type: 'bar',
      //       data: [11, 22, 11, 5, 23, 8, 17, 12, 17, 12],
      //       barWidth: '11px',
      //       label: {
      //         show: true,
      //         position: 'top',
      //         offset: [-7, 0],
      //         textStyle: {
      //           color: '#fff',
      //           fontSize: 20
      //         }
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //             offset: 0,
      //             color: '#B034FF' // 0% 处的颜色
      //           }, {
      //             offset: 1,
      //             color: '#4245FA' // 100% 处的颜色
      //           }], false),
      //           barBorderRadius: [4, 4, 0, 0]
      //         }
      //       }
      //     },
      //     {
      //       name: '村（社区）级',
      //       type: 'bar',
      //       data: [50, 137, 119, 25, 453, 255, 1219, 74, 79, 92],
      //       barWidth: '11px',
      //       label: {
      //         show: true,
      //         position: 'top',
      //         textStyle: {
      //           color: '#fff',
      //           fontSize: 20
      //         }
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //             offset: 0,
      //             color: '#8FFCA0' // 0% 处的颜色
      //           }, {
      //             offset: 1,
      //             color: '#0BCBFB' // 100% 处的颜色
      //           }], false),
      //           barBorderRadius: [4, 4, 0, 0]
      //         }
      //       }
      //     }
      //   ]
      // }
      myChart.setOption(option)
    },
    // 自助服务综合终端
    renderChart_selfServiceMachine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_9'))
      let totalNum = 852
      // 绘制图表
      const option = {
        title: {
          // text: "{a|自助服务机}" + "\n{b|" + totalNum + "}" + "{c|个}",
          text: "{b|" + totalNum + "}" + "{c|个}",
          textStyle: {
            rich: {
              a: {
                color: "#4FACFE",
                fontSize: 23,
                fontWeight: 700
              },
              b: {
                fontSize: 33,
                color: '#FAD972',
                fontWeight: 700,
                align: 'center',
                padding: [8, 0],
              },
              c: {
                color: "#4FACFE",
                fontSize: 23,
                fontWeight: 700
              }
            }
          },
          x: '43%',
          y: '39%',
        },
        color: ['#F8E5A8', '#00C7FF', '#946BC8', '#FF9A01', '#DD7A8B', '#76da62', '#00FFFF', '#3a8bf7', '#d74d49', '#78e9bc', '#ecee66'],
        legend: {
          show: false,
          orient: 'vertical',
          left: '0%', // 图例距离右的距离
          top: '8%',
          y: 'center', // 图例上下居中
          textStyle: {
            color: '#ffffff',
            fontSize: 23,
            fontWeight: 700
          },
          icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 15, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 10 // 设置间距
        },
        series: [{
          name: '',
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '50%'],
          label: {
            normal: {
              // color: '#fff',
              // position: 'inner',
              fontSize: 20,
              fontWeight: 700,
              formatter: params => {
                return (
                  `${params.name} ${params.value}个`
                )
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#0A1934',
              borderWidth: 2
            }
          },
          data: [
            {value: 12, name: '青岛市本级'},
            {value: 86, name: '市南区'},
            {value: 108, name: '市北区'},
            {value: 70, name: '李沧区'},
            {value: 63, name: '崂山区'},
            {value: 79, name: '城阳区'},
            {value: 193, name: '西海岸新区'},
            {value: 67, name: '即墨区'},
            {value: 74, name: '胶州市'},
            {value: 69, name: '平度市'},
            {value: 47, name: '莱西市'}
          ]
        }]
      }
      myChart.setOption(option)
    },
    // 政银合作自助服务站点
    renderChart_bankSelfService() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_10'))
      // 绘制图表
      const option = {
        legend: {
          data: ['青岛农商银行', '工商银行', '建设银行'],
          top: '3%',
          itemWidth: 39,
          itemHeight: 17,
          textStyle: {
            fontSize: 25,
            color: '#4FACFE'
          }
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['莱西市', '平度市', '胶州市', '即墨区', '西海岸新区', '城阳区', '崂山区', '李沧区', '市北区', '市南区'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: 25,
              color: '#ffffff'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(218, 219, 219, 0.1)'
            }
          }
        },
        series: [
          {
            name: '青岛农商银行',
            type: 'bar',
            data: [5, 10, 16, 25, 38, 52, 39, 32, 49, 29],
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#fff',
                fontSize: 20
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#0088FF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00F2FE' // 100% 处的颜色
                }], false),
                barBorderRadius: [0, 4, 4, 0]
              }
            }
          }, {
            name: '工商银行',
            type: 'bar',
            data: [6, 3, 1, 1, 1, 2, 2, 1, 2, 2],
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#fff',
                fontSize: 20
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#F2F047' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#1ED94F' // 100% 处的颜色
                }], false),
                barBorderRadius: [0, 4, 4, 0]
              }
            }
          }, {
            name: '建设银行',
            type: 'bar',
            data: [23, 27, 12, 10, 9, 16, 9, 7, 6, 4],
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#fff',
                fontSize: 20
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#FB7099' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FEDC45' // 100% 处的颜色
                }], false),
                barBorderRadius: [0, 4, 4, 0]
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 青岛各区市地图
    renderChart_QDMap() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart_11'))

      this.$echarts.registerMap('qingdao', QDMapJson)

      let option = {
        visualMap: {
          show: false,
          x: 'left',
          y: 'center',
          seriesIndex: [1],
          min: 0,
          max: 500,
          text: ['高', '低'], // 文本，默认为数值文本
          textStyle: {
            color: '#fff'
          },
          inRange: {
            // color: ['#B2CAE0', '#D2EAFF', '#8AC6FD', '#45A5F8']
          }
        },
        geo: {
          show: true,
          map: "qingdao",
          label: {
            normal: {
              show: false,
              color: "#fff"
            },
            emphasis: {
              show: false,
              color: "#fff"
            }
          },
          zoom: 1.25,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#060f39",
              borderWidth: 1,
              borderColor: "#016BBC"
            },
            emphasis: {
              areaColor: "rgba(107, 176, 207, .6)"
            }
          }
        },
        series: [
          {
            name: '市区级',
            type: "effectScatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            label: {
              normal: {
                show: false,
                formatter(params) {
                  return `{fline|${params.name}}`;
                },
                position: 'top',
                backgroundColor: 'rgba(40, 75, 247, .8)', // 'rgba(254, 174, 33, .8)',
                borderRadius: 3,
                lineHeight: 30,
                color: '#f7fafb',
                rich: {
                  fline: {
                    padding: [5, 5, 5, 5],
                    color: '#fff',
                    fontSize: 18,
                    fontWeight: 700,
                  }
                },
              },
            },
            data: [
              {
                // "name": "山东省青岛市市南区宁夏路286号行政审批服务大厅",
                "name": '市南区宁夏路286号',
                "value": [ 120.418795, 36.081644, 0],
                label: {
                  normal: {
                    position: 'bottom'
                  },
                },
              }, {
                // "name": "山东省青岛市崂山区云岭支路与阳岭路交叉路口往东约100米(山东省青岛市人民检察院南侧)",
                "name": '崂山区金家岭街道仙霞岭路\n20号市民文化中心D座',
                "value": [120.479163, 36.114469, 0 ],
                label: {
                  normal: {
                    position: 'right'
                  },
                },
              }, {
                // "name": "山东省青岛市市北区鞍山二路48号",
                "name": "市北区鞍山二路48号",
                "value": [ 120.372969, 36.109812, 0 ],
                label: {
                  normal: {
                    position: 'left'
                  },
                },
              }, 
              {
                // "name": "山东省青岛市黄岛区双珠路166号2号楼",
                "name": "黄岛区双珠路166号2号楼",
                "value": [ 120.053157, 35.880788, 0]
              }, {
                // "name": "山东省青岛市平度市北京路379-2号",
                "name": "平度市北京路379-2号",
                "value": [ 119.97813, 36.756942, 0 ]
              }, {
                // "name": "山东省青岛市即墨区行政审批服务局",
                "name": "即墨区振武路496号",
                "value": [ 120.542799, 36.414231, 0 ]
              }, {
                // "name": "山东省青岛市莱西市长岛路148西南60米",
                "name": "莱西市水集街道长岛路148号",
                "value": [ 120.522156, 36.889321, 0 ]
              },
              // {
              //   // "name": "山东省青岛市城阳市民中心位于文阳路675号",
              //   "name": "城阳区文阳路675号",
              //   "value": [ 120.388022, 36.301775, 0 ],
              //   label: {
              //     normal: {
              //       position: 'right'
              //     },
              //   },
              // }, {
              //   // "name": "青岛国家高新区行政审批服务大厅",
              //   "name": "高新区静园路8号",
              //   "value": [ 120.290761, 36.279371, 0 ]
              // }, {
              //   // "name": "山东省青岛市李沧区黑龙江中路617号",
              //   "name": "李沧区黑龙江中路617号",
              //   "value": [ 120.43222, 36.14817, 0 ]
              // }, {
              //   // "name": "山东省青岛市胶州市北京路2号",
              //   "name": "胶州市北京路2号",
              //   "value": [ 120.030433, 36.264718, 0 ],
              //   label: {
              //     normal: {
              //       position: 'left'
              //     },
              //   },
              // }, {
              //   "name": "青岛保税区北京路66号",
              //   "value": [ 120.17454, 35.98446, 0 ],
              //   label: {
              //     normal: {
              //       position: 'left'
              //     },
              //   },
              // }
            ],
            symbolSize: 15,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#4649f1', // 打点颜色
                shadowBlur: 5,
                shadowColor: '#4649f1'
              }
            },
          }, {
            name: '镇街级',
            type: "effectScatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            label: {
              normal: {
                show: false,
                formatter(params) {
                  return `{fline|${params.name}}`;
                },
                position: 'top',
                backgroundColor: 'rgba(40, 75, 247, .8)', // 'rgba(254, 174, 33, .8)',
                borderRadius: 3,
                lineHeight: 30,
                color: '#f7fafb',
                rich: {
                  fline: {
                    padding: [5, 5, 5, 5],
                    color: '#fff',
                    fontSize: 18,
                    fontWeight: 700,
                  }
                },
              },
            },
            data: [
              {
                // "name": "山东省青岛市城阳市民中心位于文阳路675号",
                "name": "城阳区文阳路675号",
                "value": [ 120.388022, 36.301775, 0 ],
                label: {
                  normal: {
                    position: 'right'
                  },
                },
              }, {
                // "name": "青岛国家高新区行政审批服务大厅",
                "name": "高新区静园路8号",
                "value": [ 120.290761, 36.279371, 0 ]
              }, {
                // "name": "山东省青岛市李沧区黑龙江中路617号",
                "name": "李沧区黑龙江中路617号",
                "value": [ 120.43222, 36.14817, 0 ]
              }
            ],
            symbolSize: 15,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#e93f42',
                shadowBlur: 5,
                shadowColor: '#f00'
              }
            },
          }, {
            name: '自助终端网点',
            type: 'effectScatter', // scatter
            coordinateSystem: 'geo',
            symbol: 'pin',
            geoIndex: 0,
            symbolSize: [30, 30],
            itemStyle: {
              normal: {
                color: '#fffe86', //标志颜色 D8BC37
              }
            },
            data: [
              {
                // "name": "山东省青岛市胶州市北京路2号",
                "name": "胶州市北京路2号",
                "value": [ 120.030433, 36.264718, 0 ],
                label: {
                  normal: {
                    position: 'left'
                  },
                },
              }, {
                "name": "青岛保税区北京路66号",
                "value": [ 120.17454, 35.98446, 0 ],
                label: {
                  normal: {
                    position: 'left'
                  },
                },
              }
            ],
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          }, {
            type: "map",
            mapType: "qingdao",
            aspectScale: 0.75,
            zoom: 1.2,
            // geoIndex: 1,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#333',
                  fontSize: 18,
                  fontWeight: 700
                },
                formatter: function(val) {
                  let { name, value } = val
                  return `${name}`
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: "#fff", // "#9dc6d6",
                areaColor: "rgba(138, 198, 253)", // 地图区域颜色 rgba(138, 198, 253)
                // color: ['#B2CAE0', '#D2EAFF', '#8AC6FD', '#45A5F8', '#d6e9fd']
              },
              emphasis: { // 鼠标悬浮时，区块颜色
                areaColor: "#45A5F8",
              }
            },
            animation: false,
            data: [
              { "name": "市北区", "value": 381 },
              { "name": "市南区", "value": 212 },
              { "name": "李沧区", "value": 322 },
              { "name": "西海岸新区", "value": 41 },
              { "name": "城阳区", "value": 44 },
              { "name": "崂山区", "value": 32 },
              { "name": "即墨区", "value": 52 },
              { "name": "西海岸新区", "value": 41 },
              { "name": "平度市", "value": 23 },
              { "name": "莱西市", "value": 64 },
              { "name": "胶南市", "value": 12 }
            ]
          }
        ]
      }
      myChart.setOption(option, true)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.title {
  height: 103px;
  background: url('../assets/background/bg_tit.png') no-repeat;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 35px 0;
  background-size: 100%;
  background-position-y: 25px;
}

.container-right {
  padding-right: 30px;

  .subTit {
    font-size: 29px;
    color: #00D2FF;
    font-weight: 600;

    img {
      position: relative;
      top: 3px;
      margin-right: 10px;
    }
  }


  .angle {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  // 服务次数
  .panel-left-1 {
    height: 155px;
    margin-bottom: 15px;

    .serviceTimesBox {
      padding: 20px 155px;

      .tit {
        font-size: 25px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        margin-bottom: 10px;
      }
      ul {
        overflow: hidden;
        margin-bottom: 20px;
      }
      ul li {
        float: left;
        width: 36px;
        height: 56px;
        background: #002870;
        font-size: 36px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #00FFF0;
        text-align: center;
        margin-right: 5px;
      }
    }
  }

  // 基层便民服务场所
  .panel-left-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 427px;
    margin-bottom: 15px;

    .angle-left-top {
      left: 0;
      border-top: 1px solid #037C93;
      border-left: 1px solid #037C93;
    }

    .angle-left-bottom {
      top: 584px;
      left: 0;
      border-bottom: 1px solid #037C93;
      border-left: 1px solid #037C93;
    }

    .angle-right-top {
      left: 559px;
      border-top: 1px solid #037C93;
      border-right: 1px solid #037C93;
    }
    
    .angle-right-bottom {
      top: 584px;
      left: 559px;
      border-right: 1px solid #037C93;
      border-bottom: 1px solid #037C93;
    }
  }

  .panel-left-3 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 430px;

    .angle-left-top {
      left: 0;
      border-top: 1px solid #037C93;
      border-left: 1px solid #037C93;
    }

    .angle-left-bottom {
      left: 0;    
      bottom: 15px;
      border-bottom: 1px solid #037C93;
      border-left: 1px solid #037C93;
    }

    .angle-right-top {
      left: 559px;
      border-top: 1px solid #037C93;
      border-right: 1px solid #037C93;
    }
    
    .angle-right-bottom {
      left: 559px;    
      bottom: 15px;
      border-right: 1px solid #037C93;
      border-bottom: 1px solid #037C93;
    }
  }

  // 自助服务综合终端
  .panel-right-1 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 337px;
    margin-bottom: 15px;

    .angle-left-top {
      right: 641px;
      border-top: 1px solid #037C93;
      border-left: 1px solid #037C93;
    }

    .angle-left-bottom {
      top: 323px;
      right: 641px;
      border-bottom: 1px solid #037C93;
      border-left: 1px solid #037C93;
    }

    .angle-right-top {
      right: 0;
      border-top: 1px solid #037C93;
      border-right: 1px solid #037C93;
    }
    
    .angle-right-bottom {
      top: 323px;
      right: 0;
      border-right: 1px solid #037C93;
      border-bottom: 1px solid #037C93;
    }
  }

  // 政银合作自助服务站点
  .panel-right-2 {
    border: 1px solid rgba(0, 255,255,0.1);
    height: 690px;
    margin-bottom: 15px;

    .angle-left-top {
      right: 641px;
      border-top: 1px solid #037C93;
      border-left: 1px solid #037C93;
    }

    .angle-left-bottom {
      right: 641px;
      bottom: 15px;
      border-bottom: 1px solid #037C93;
      border-left: 1px solid #037C93;
    }

    .angle-right-top {
      right: 0;
      border-top: 1px solid #037C93;
      border-right: 1px solid #037C93;
    }
    
    .angle-right-bottom {
      right: 0;
      bottom: 15px;
      border-right: 1px solid #037C93;
      border-bottom: 1px solid #037C93;
    }
  }

  .panel-middle-1 {
    height: 530px;
    padding: 25px;
    margin-bottom: 15px;

    .tuli {
      font-size: 24px;
      position: relative;
      left: 55%;
      bottom: 24%;

      span {
        position: relative;
        top: 2px;
        right: 10px;
        border-radius: 50%;
        display: inline-block;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #e93f42;
      }

      i {
        color: #fffe86;
        font-size: 26px;
        position: relative;
        right: 10px;
      }
    }
  }
}
</style>